<template>
	<div>
		<el-page-header @back="emitData">
			<template #extra>
				<div class="flex items-center">
					<el-button type="primary" class="ml-2" @click="emitData">确定选择</el-button>
				</div>
			</template>
			<el-tabs v-model="activeName" class="demo-tabs" tab-position="top" type="border-card">
				<el-tab-pane label="运营单位" name="serviceOrgHome">
					<serviceOrgHome
						:api="{ index: 'dpServiceOrgHome_page',authArea:true,isWithAuth:true }"
						:auth="{ index: 'view_dpServiceOrgHome_page' }"
						:tableConfig="getTableConfig(tableConfig)"
            :needPigeonhole="false"
            :moreSearchConfig="false"
						:selectedData="dataList"
						@selection-change="handleSelectChange"
					></serviceOrgHome>
				</el-tab-pane>
				<el-tab-pane label="服务设施" name="serviceFacility">
					<serviceFacility
            :api="{ index: 'dpServiceFacility_page',authArea:true ,isWithAuth:true}"
						:auth="{ index: 'view_dpServiceFacility_page' }"
						:tableConfig="getTableConfig(faceTableConfig)"
            :needPigeonhole="false"
            :moreSearchConfig="false"
						:selectedData="dataList"
						@selection-change="handleSelectFaceChange"
					></serviceFacility>
				</el-tab-pane>
			</el-tabs>
		</el-page-header>
	</div>
</template>

<script setup lang="ts">
import serviceOrgHome from '@/views/datacenter/basicData/serviceOrgHome/index.vue'
import serviceFacility from '@/views/datacenter/basicData/serviceFacility/index.vue'

import { tableConfig } from '@/views/datacenter/basicData/serviceOrgHome/config'
import { tableConfig as faceTableConfig } from '@/views/datacenter/basicData/serviceFacility/config'

const emit = defineEmits(['change'])
const props = defineProps<{
	dataList?: any
}>()
const activeName = ref('serviceOrgHome')

const getTableConfig = (tableConfig) => {
	tableConfig.columns.unshift({
		type: 'selection',
		width: 55,
		align: 'center',
		label: '选择',
	})
	return tableConfig
}

const multipleSelection = ref([])

let orgHomeSelection = []
let facteSelection = []
const emitData = () => {
	const multipleSelection = [...orgHomeSelection, ...facteSelection]
		.map((item) => {
			if (item.orgHomeName || item.soleValue) {
				return {
					label: item.orgHomeName || item.soleValue,
					value:  item.soleValue || item.uniqueValue,
					creditCode: item.creditCode,
					id: item.id,
				}
			}
		})
		.filter(Boolean)
	emit('change', multipleSelection)
}
const handleSelectChange = (arr) => {
	orgHomeSelection = arr
}

const handleSelectFaceChange = (arr) => {
	facteSelection = arr
}
</script>

<style scoped></style>
